<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通道记录仪</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        .layui-card{
            font-size: 18px;
        }

        .layui-inline{
             font-size: 0.9em;
             font-weight: bolder;
             margin: 10px 0;
         }
        .layui-inline .label_style{
            width: 110px;
            display: inline-block;
            text-align: right;
        }
        .layui-inline .data_style{
            padding-left: 10px;
            width: 76px;
            display: inline-block;
        }
        .data_inline{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            margin: 20px 0;
            font-size: 1.5em;
            font-weight: bolder;
        }
        .data_inline .label_style{
            width: 80px;
            text-align: right;
            display: inline-block;
            color: #04e7ed;
        }
        .data_inline .data_style{
            display: inline-block;
            padding-left: 20px;
            width: 80px;
        }
        .status_float{
            float: right;
        }
        .status{
            width: 70px;
            display: inline-block;
            text-align: center
        }
    </style>
</head>
<body>
<form class="layui-form" action="" style="margin-top: 30px;">
    <div class="layui-form-item">
        <label class="layui-form-label">主板编号</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="id">
        </div>
        <label class="layui-form-label">状态信息</label>
        <div class="layui-input-inline">
            <select name="zhuangtai" lay-filter="state">
                <option value="">无</option>
                <option value="1">在线</option>
                <option value="2">不在线</option>
            </select>
        </div>
        <button class="layui-btn">查找</button>
    </div>
</form>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header" style="font-weight: bold">
                    通道&nbsp;<span>1</span>
                    <div class="status_float">
                        状态：<div class="status">在线</div>
                    </div>
                </div>
                <div class="layui-card-body" style="background-color: #727272;color:#ffffff">
                    <form class="layui-form" action="">
                        <div>
                            <div class="layui-inline">
                                <div class="label_style">编&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style" style="">2019</div>
                            </div>
                            <div class="layui-inline">
                                <div class="label_style">孔&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style">1</div>
                            </div>
                            <div class="layui-inline">
                                <div class="label_style">段&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style">1</div>
                            </div>
                        </div>
                        <div>
                            <div class="data_inline">
                                <div class="label_style">J</div>
                                <div class="data_style" style="color: #00ae00;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">F</div>
                                <div class="data_style" style="color: #00ae00;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">C</div>
                                <div class="data_style" style="color: #009fc2;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style" style="width: 160px">T</div>
                                <div class="data_style" style="color: #c26400">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">W</div>
                                <div class="data_style" style="color: #ff0000;">2019</div>
                            </div>
                        </div>
                        <div style="text-align: right">
                            <button type="button" class="layui-btn layui-btn-normal manage">管理施工</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header" style="font-weight: bold">
                    通道&nbsp;<span>2</span>
                    <div class="status_float">
                        状态：<div class="status">不在线</div>
                    </div>
                </div>
                <div class="layui-card-body" style="background-color: #727272;color:#ffffff">
                    <form class="layui-form" action="">
                        <div>
                            <div class="layui-inline">
                                <div class="label_style">编&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style">2019</div>
                            </div>
                            <div class="layui-inline">
                                <div class="label_style">孔&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style">1</div>
                            </div>
                            <div class="layui-inline">
                                <div class="label_style">段&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp号：</div>
                                <div class="data_style">1</div>
                            </div>
                        </div>
                        <div>
                            <div class="data_inline">
                                <div class="label_style">J</div>
                                <div class="data_style" style="color: #00ae00;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">F</div>
                                <div class="data_style" style="color: #00ae00;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">C</div>
                                <div class="data_style" style="color: #009fc2;">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style" style="width: 160px">T</div>
                                <div class="data_style" style="color: #c26400">2019</div>
                            </div>
                            <div class="data_inline">
                                <div class="label_style">W</div>
                                <div class="data_style" style="color: #ff0000;">2019</div>
                            </div>
                        </div>
                        <div style="text-align: right">
                            <button type="button" class="layui-btn layui-btn-normal manage">管理施工</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../layui/layui.js"></script>
<script>
    layui.use(['form','layer','jquery'],function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        // 筛选
        form.on('select(state)',function (data) {
            console.log(data.value); //得到被选中的值
        });
        // 施工管理
        $(".manage").click(function () {
            console.log(1111);
            var constructionManage = layer.open({
                type:2,
                content:"constructionData.html",
                title:"施工管理",
                move: false,
                area:["1250px","600px"],
                maxmin:false,
                resize:false
            });
            layer.full(constructionManage);
        });
    });
</script>
</body>
</html>